<template>
  <div>
    <Table :list="list">
      <template #thead>
        <th>序号</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
       <!-- 作用域插槽 -->
      <template #body="{item,i}">
        <td>{{ i + 1 }}</td>
        <td>{{ item.goods_name }}</td>
        <td>￥{{ item.goods_price }}</td>
        <td>
          <input
          v-if="item.inputVisible"
          v-model="item.inputValue"
          type="text"
          class="inp"
          v-focus
          @blur="item.inputVisible=false"
          @keyup.esc="item.inputValue=''"
          @keyup.enter="addPir(item)">
          <button @click="item.inputVisible = true" v-else class="btn btn-primary">+tag</button>
          <span class="label" v-for="tag in item.tags" :key="tag">{{ tag }}</span>
        </td>
        <td><button class="btn btn-danger btn-sm" @click="delPir(i)">删除</button></td>
      </template>
    </Table>
  </div>
</template>

<script>
import Table from '@/components/table'
export default {
  name: 'List',
  data () {
    return {
      list: []
    }
  },
  components: {
    Table
  },
  created () {
    this.getList()
  },
  methods: {
    async getList () {
      const { data } = await this.request({ url: '/api/goods' })
      console.log(data)
      this.list = data.data
    },
    delPir (i) {
      this.list.splice(i, 1)
    },
    addPir (item) {
      if (!item.inputValue) return
      item.tags.push(item.inputValue)
      item.inputValue = ''
      item.inputVisible = false
    }
  }
}
</script>

<style scoped>
.btn,.inp {
  margin-right: 5px;
}
.label {
  display: inline-block;
  padding: 3px;
  border: 1px solid rgb(92, 92, 245);
  background-color: rgb(92, 92, 245);
  color: #fff;
  border-radius: 15%;
  margin-right: 5px;
}
</style>
